<template>
  <div class="book-detail-container">

    <div class="book-info">
      <div class="book-cover">
        <img :src="book.coverUrl || 'https://picsum.photos/seed/book/400/600'"
             alt="书籍封面"
             class="cover-image"
             @error="handleImageError">
      </div>

      <div class="book-meta">
        <el-badge v-if="book.isNew" :value="'新书'" type="success" class="new-badge"></el-badge>
        <h1 class="book-title">{{ book.title }}</h1>

        <div class="book-authors">
          <span class="author-label">作者:</span>
          <span class="author-names">{{ book.authors }}</span>
        </div>

        <div class="book-publisher">
          <span class="meta-label">出版社:</span>
          <span>{{ book.publisher }}</span>
        </div>

        <div class="book-publish-date">
          <span class="meta-label">出版日期:</span>
          <span>{{ book.publishDate }}</span>
        </div>

        <div class="book-isbn">
          <span class="meta-label">ISBN:</span>
          <span>{{ book.isbn }}</span>
        </div>

        <div class="book-price">
          <span class="meta-label">价格:</span>
          <span class="price-value">¥{{ book.price }}</span>
        </div>

        <div class="book-rating">
          <el-rate v-model="book.rating" disabled show-text text-color="#ff9900"></el-rate>
          <span class="rating-count">({{ book.ratingCount }}人评价)</span>
        </div>

        <div class="book-actions">
          <el-button type="primary" size="large" icon="el-icon-shopping-cart">
            加入购物车
          </el-button>
          <el-button type="success" size="large" icon="el-icon-check">
            立即购买
          </el-button>
          <el-button type="text" size="large" icon="el-icon-star-off">
            收藏
          </el-button>
        </div>
      </div>
    </div>

    <!-- 书籍简介 -->
    <div class="book-summary">
      <el-divider content-position="left">书籍简介</el-divider>
      <p class="summary-content">{{ book.summary }}</p>
    </div>

    <!-- 目录 -->
    <div class="book-catalog">
      <el-divider content-position="left">目录</el-divider>
      <ul class="catalog-list">
        <li v-for="(item, index) in book.catalog" :key="index" class="catalog-item">
          {{ item }}
        </li>
      </ul>
    </div>

    <!-- 评论 -->
    <div class="book-reviews">
      <el-divider content-position="left">读者评论</el-divider>

      <el-comment
          v-for="(review, index) in book.reviews"
          :key="index"
          :content="review.content"
          :datetime="review.date"
          :show-actions="false">
        <template #avatar>
          <img :src="review.avatar || 'https://picsum.photos/seed/user' + index + '/100/100'"
               alt="用户头像"
               class="review-avatar">
        </template>
        <template #name>
          <span class="review-user">{{ review.user }}</span>
        </template>
      </el-comment>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="book.reviews">
      </el-pagination>
    </div>

  </div>
</template>

<script setup>
import {onMounted, ref, watch} from 'vue'
import {useRoute} from 'vue-router'

const route = useRoute()
const book = ref({})
const loading = ref(true)
const error = ref(false)
const currentPage = ref(1)
const pageSize = ref(5)

// 获取书籍详情
const fetchBookDetail = async () => {
  loading.value = true
  error.value = false

  try {
    const bookId = route.params.id

    console.log("书籍id ", bookId);

    // await axios.get(`/Books/${bookId}`)
    const response = {
      data: {
        publisher: bookId + "出版社",
        reviews: [{
          content: "测试评论",
          date: "2024-5-1",
          avatar: "https://picsum.photos/seed/user" + bookId + '/100/100',
          user: "用户" + bookId
        }],
        catalog: [
          "目录1",
          "目录2",
          "目录3"
        ],
        summary: "测试书籍简介",
        ratingCount: 10,
        price: 999.99,
        authors:
            "作者1",
        isNew: false,
        rating: 4.5,
        coverUrl: "https://picsum.photos/seed/book" + bookId + '/400/600',
        title: "测试书籍" + bookId,
        isbn: "ISBN" + bookId,
        publishDate: "2024-5-1"
      }
    }

    book.value = response.data
    console.log("书籍详情", book.value)
  } catch (err) {
    console.error('获取书籍详情失败:', err)
    error.value = true
  } finally {
    loading.value = false
  }
}

// 处理图片加载错误
const handleImageError = (e) => {
  e.target.src = 'https://picsum.photos/seed/nocover/400/600'
}

// 分页相关方法
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
}

// 监听路由变化，更新书籍信息
watch(() => route.params.id, () => {
  fetchBookDetail()
})

onMounted(() => {
  fetchBookDetail()
})
</script>

<style scoped>
.book-detail-container {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

.detail-card {
  padding: 30px;
}

.loading-container, .error-container {
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-image {
  max-width: 100%;
  height: auto;
}

.book-info {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.book-cover {
  flex: 0 0 300px;
}

.cover-image {
  width: 100%;
  height: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.new-badge {
  margin-right: 10px;
}

.book-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 15px;
}

.book-meta > div {
  margin-bottom: 10px;
  font-size: 16px;
}

.meta-label {
  color: #8c8c8c;
  margin-right: 8px;
}

.author-label {
  color: #8c8c8c;
  margin-right: 8px;
}

.author-names {
  color: #2d8cf0;
}

.price-value {
  color: #f56c6c;
  font-size: 22px;
  font-weight: bold;
}

.book-rating {
  margin-top: 15px;
  margin-bottom: 25px;
}

.rating-count {
  color: #8c8c8c;
  margin-left: 10px;
}

.book-actions {
  margin-top: 30px;
  display: flex;
  gap: 20px;
}

.book-summary, .book-catalog, .book-reviews {
  margin-bottom: 30px;
}

.summary-content {
  line-height: 1.8;
  text-indent: 2em;
  color: #333;
}

.catalog-list {
  padding-left: 20px;
}

.catalog-item {
  margin-bottom: 8px;
  line-height: 1.6;
}

.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.review-user {
  font-weight: 500;
}
</style>